@headHeight: 100px;
@footHeight: 64px;
@logoHeight: 60px;
@ctrButtonR: 40px;
@photoHeight: 56px;
@gutter: 20px;
@borderColor: #eee;
@border: 1px solid @borderColor;
@mainColor: #bc2f2a;
@numButtonW: 28px;


// 礼物项布局
.photoL{ flex: @photoHeight 0 0; }
.nameL{ flex: 30px 1 1; }
.priceL{ flex: 40px 1 1; }
.numL{ flex: 120px 0 0; }


.flexRight {
  display: flex;
  flex-direction: row;
}

.centerImg{
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 布局
.pay {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  background-color: white;

}

.head {
  flex: @headHeight 0 0;

  position: relative;

  height: @headHeight;
  border-bottom: @border;
}

.main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.foot{
  flex: @footHeight 0 0;

  position: relative;
  height: @footHeight;
}

.footIn{
  width: 100%;
  height: 100%;
  border-top: @border;
  align-items: center;
  padding: 0 @gutter;
  .flexRight;
}

.footPay{
  justify-content: space-between;
}

.footSay{
  justify-content: center;
}



.backgroundCon{
  width: 100%;
  height: 100%;

  .centerImg;
}

.moneyBackground{
  width: 100%;
}

.circleCon{

  border-radius: 50%;
  position: absolute;


}

.logoCon{
  .centerImg;
  .circleCon;
  border: @border;
  width: @logoHeight;
  height: @logoHeight;
  right: 20px;
  bottom: -0.5 * @logoHeight;
  background-color: white;
}

.logoCon img {
  width: 70%;
  height: 70%;
}


.item{
  .flexRight;

  flex-grow: 1;
  align-items: center;
  justify-content: space-between;

  padding-left: @gutter ;
}

.itemImgCon{
  width: @photoHeight;
  height: @photoHeight;
  .centerImg;
}

.itemImgCon img{
  .photoL;
  width: 100%;
  height: 100%;
}

.itemNum{
  .flexRight;
   .numL;
  padding-right: @gutter;

  display: flex;
  justify-content: space-between;
}

.itemName{
  .nameL;
  padding-left: 4%;
  font-size: 16px;
}

.itemPrice{
  .priceL;
  font-size: 14px;
  padding-left: 6%;
  color: @mainColor;
}

.numButton{
  border-radius: 50%;
  width: @numButtonW;
  height: @numButtonW;
  font-size: 20px;
  line-height: @numButtonW - 2px;
}

.numSubL{
  flex-grow: 0;
}

.numValL{
  flex-grow: 1;
  line-height: @numButtonW + 2px;
}

.numCon{
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}



.numSub{
 .numSubL;
  .numButton;
  .numCon;
  border: 1px solid @mainColor;

}

.numSub img,
.numAdd img{
  width: 16px;
  height: 16px;
}

.numVal{
  .numValL;
  text-align: center;
}
.numAdd{
  flex-grow: 0;
  .numButton;
  .numCon;
  border: 1px solid @mainColor;
  background-color:  @mainColor;
}

.sum{
  .flexRight;

  align-items: center;
}

.sum span{
  font-size: 28px;
  color: @mainColor;
}



// ******************************  mainList *************************
.mainList{
  width: 100%;
  flex-grow: 1;
  padding: 0.8 * @logoHeight 0 0.6 * @ctrButtonR 0;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 300ms ease-in;
}


:global(.mainListAni-appear) {
  opacity: 0;
}

:global(.mainListAni-appear-active ){
  opacity: 1;

}

// ******************************* mainEdit **************************

.mainEdit{
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


.mainEditCon{
  display: flex;
  flex-direction: column;
  height: 400px;
  transition: height 300ms cubic-bezier(0.000, 0.000, 0.200, 1.005);
}

.mainEditGift{
  flex: 100px 1 1;
  display: flex;
  position: relative;
  border-top: @border;
  padding-top: 0.6 * @ctrButtonR;

}

.mainEditAuto{
  border-top: @border;
  padding-top: 0.6 * @ctrButtonR;
  flex: 300px 1 1;
  position: relative;
  display: flex;

}

:global(.mainEditAni-appear) {
  height: 0;
}

:global(.mainEditAni-appear-active ){
  height: 400px;

}

.mainEGift{
  overflow: hidden;
  flex-grow: 1;
  padding-left: @gutter;
}

.mainESay{
  overflow: hidden;
  flex-grow: 1;
  padding-left: @gutter;
}

.anonymousCon{
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: @numButtonW - 4px;
}

.anonymousIcon{
  border-radius: 50%;
  width: @numButtonW - 4px;
  height: @numButtonW - 4px;
  border: 1px solid @borderColor;
  padding: 2px;
  margin-left: 0.5 * @gutter;
}

.anonymousSelected div{
  background-color: @mainColor;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.anonymousSelected{
  border: 1px solid @mainColor;
}

.sayCon{
  margin-top: 0.5 * @gutter;
  display: flex;
  flex-direction: row;
}

.sayEditor{
  height: 200px;
  flex-grow: 1;
  border: 1px solid @borderColor;
  border-radius: 4px;
  margin-right: @gutter;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  resize: none;
  font-size: 14px;
}


.sayEditor:focus{
  outline: 0 solid transparent;
  border: 1px solid @mainColor;
}

.sayLabel{
  flex-shrink: 0;
}


// ******************************* foot *************************

.up, .down{
  right: 20px;
  bottom: -0.5 * @logoHeight;
  .centerImg;
  .circleCon;
  background-color: @mainColor;
  top: -0.5 * @ctrButtonR;
  left: @gutter;
  width: @ctrButtonR;
  height: @ctrButtonR;
}

.up img, .down img {
  width: 60%;
  height: 60%;
}

// ******************************* modal *************************
.modal{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.modalMain{
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.modalButton{

  flex: @footHeight 0 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}


// ******************************* button *************************
.button{

  letter-spacing: 2px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 20px;
  text-align: center;
  height: @numButtonW + 12px;
}

.buttonPrimary{
  .button;
  color: white;
  background-color: @mainColor;

  line-height: @numButtonW + 12px;
}

.buttonNormal{
  .button;
  color: @mainColor;
  background-color: white;
  border: 1px solid @mainColor;
  line-height: @numButtonW + 10px;
}




.heart{
  width: 0;
  position: fixed;
  top: 5%;
  z-index: 10000;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 32px;
}
.heart img{
  width: 100%;
}

.giftText{
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255, 1);
  color: rgb(209,82,92);
}


:global(.show-heart-enter) {
  width: 0;
}

:global(.show-heart-enter.show-heart-enter-active ){
  width: 50%;
  transition: width 2000ms ease-out;
}

:global(.show-heart-exit) {
  width: 0;
}

:global(.show-heart-exit.show-heart-exit-active ){
  width: 0;
  transition: width 0ms ease-out;
}
